<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../bower_components/underscore/underscore.js"></script>
    <script type="text/javascript" src="../dist/intact.js"></script>
    <style type="text/css">
        .outer {
            padding: 20px;
            background: #333;
        }
        .center {
            padding: 20px;
            background: #666;
        }
        .inner {
            padding: 20px;
            background: #999;
        }
    </style>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
    var SubComponent = Intact.extend({
        defaults: {
            num: 0
        },

        displayName: 'SubComponent',

        template: '<div ev-click={self.change.bind(self)}>num: {self.get("num")} count:{self.get("count")}</div>',

        change: function() {
            this.set({
                'num': this.get('num') + 1,
                'count': this.get('count') + 1
            });
            this.test = this.test ? this.test + 1 : 1;
//            console.log(self.test);
        }
    });

    var SubComponentOther = Intact.extend({
        defaults: {
            num: 1
        },
        template: '<div>{self.get("num")}</div>',
        displayName: 'SubComponentOther'
    });

    var MyComponent = Intact.extend({
        defaults: {
            a: 0
        },

        displayName: 'MyComponent',

        template: '<div ev-mouseenter={ function() {console.log(1)} }>' +
            '<div ev-click={self.change.bind(self)}>{self.get("a")}</div>' +
            '{self.get("a") !== 10 ? <SubComponent count={self.get("a")} ev-change:count={self.changeCount.bind(self)} /> : <SubComponentOther />}' +
        '</div>',

        change: function() {
            this.set('a', this.get('a') + 1);
        },

        changeCount: function(widget, value) {
            this.set('a', value);
        }
    });

    Intact.mount(MyComponent, document.getElementById('example'));

    var EventTest = Intact.extend({
        template: '<div class="outer" ev-click={self.clickOuter.bind(self)}>' + 
            '<div class="center" ev-click={self.clickCenter.bind(self)}>' +
                '<div class="inner"></div>' +
            '</div>' +
        '</div>',

        clickOuter: function() {
            console.log('outer');
        },

        clickCenter: function(e) {
            e.startPropagation();
            console.log('center');
        },

        clickInner: function() {
            console.log('inner');
        }
    });

    Intact.mount(EventTest, document.getElementById('example'));
</script>
</body>
</html>
